<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Issue_A</title>
    <script src="./js/echarts/echarts.min.js"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/cookie.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/common.js"></script>

</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">中国与东盟十国合作关系</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="/issue_A.html">与东盟十国合作态势变化（年份-学科）<span class="sr-only">(current)</span></a></li>
                <li><a href="/issue_B.html">与东盟十国的合作态势（年份-国家）</a></li>
                <li><a href="/issue_C.html">与东盟十国的合作态势（地图）</a></li>
                <li><a href="/issue_D.html">发文机构占比</a></li>
                <li><a href="/issue_G.html">各东盟在核心领域的作者</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="app">
    <h3 style="text-align: center;">与东盟十国合作态势变化</h3>
    <div id="issue_a" class="item"></div>
    <div class="item" id="issue_a_brunei"></div>
    <div class="item" id="issue_a_cambodia"></div>
    <div class="item" id="issue_a_indonesia"></div>
    <div class="item" id="issue_a_laos"></div>
    <div class="item" id="issue_a_malaysia"></div>
    <div class="item" id="issue_a_myanmar"></div>
    <div class="item" id="issue_a_philippines"></div>
    <div class="item" id="issue_a_singapore"></div>
    <div class="item" id="issue_a_thailand"></div>
    <div class="item" id="issue_a_vietnam"></div>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            country: {
                name: "中国",
                all: 1000,
                brunei: 5,
                cambodia: 2,
                indonesia: 20,
                laos: 1,
                malaysia: 70,
                myanmar: 7,
                philippines: 15,
                singapore: 300,
                thailand: 66,
                vietnam: 140
            },
            city: {
                name: "广东",
                all: 70,
                brunei: 0,
                cambodia: 0,
                indonesia: 2,
                laos: 0,
                malaysia: 15,
                myanmar: 2,
                philippines: 2,
                singapore: 40,
                thailand: 12,
                vietnam: 5
            },
            issue_a: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_brunei: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_cambodia: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_indonesia: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_laos: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_malaysia: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_myanmar: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_philippines: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_singapore: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_thailand: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            },
            issue_a_vietnam: {
                data: {
                    xAxis: [],
                    category: [],
                    details: [],
                    selected: {'Chemistry': false},
                }
            }
        },
        mounted: async function () {
            let o = this.city;
            this.initCountryChart("/issue_a", this.issue_a, o.all, document.getElementById("issue_a"), o.name + "与东盟十国");
            this.initCountryChart("/issue_a/issue_a_brunei", this.issue_a_brunei, o.brunei, document.getElementById("issue_a_brunei"), o.name + "与文莱");
            this.initCountryChart("/issue_a/issue_a_cambodia", this.issue_a_cambodia, o.cambodia, document.getElementById("issue_a_cambodia"), o.name + "与柬埔寨");
            this.initCountryChart("/issue_a/issue_a_indonesia", this.issue_a_indonesia, o.indonesia, document.getElementById("issue_a_indonesia"), o.name + "与印度尼西亚");
            this.initCountryChart("/issue_a/issue_a_laos", this.issue_a_laos, o.laos, document.getElementById("issue_a_laos"), o.name + "与老挝");
            this.initCountryChart("/issue_a/issue_a_malaysia", this.issue_a_malaysia, o.malaysia, document.getElementById("issue_a_malaysia"), o.name + "与马来西亚");
            this.initCountryChart("/issue_a/issue_a_myanmar", this.issue_a_myanmar, o.myanmar, document.getElementById("issue_a_myanmar"), o.name + "与缅甸");
            this.initCountryChart("/issue_a/issue_a_philippines", this.issue_a_philippines, o.philippines, document.getElementById("issue_a_philippines"), o.name + "与菲律宾");
            this.initCountryChart("/issue_a/issue_a_singapore", this.issue_a_singapore, o.singapore, document.getElementById("issue_a_singapore"), o.name + "与新加坡");
            this.initCountryChart("/issue_a/issue_a_thailand", this.issue_a_thailand, o.thailand, document.getElementById("issue_a_thailand"), o.name + "与泰国");
            this.initCountryChart("/issue_a/issue_a_vietnam", this.issue_a_vietnam, o.vietnam, document.getElementById("issue_a_vietnam"), o.name + "与越南");
        },
        methods: {
            initCountryChart: function (addr, target, threshold, eId, title) {
                this.req(addr, target, threshold);
                this.initEcharts(target, eId, title, this.series);
            },
            initEcharts: initEcharts,
            req: async function req(addr, targetObj, threshold) {
                let self = this;
                let e = await this.reqXXX(addr);
                let obj = JSON.parse(e.currentTarget.responseText);
                //  console.log("obj: ", obj);
                // delete obj[null];
                let set = new Set();
                let tmp = {};
                let d = targetObj.data;
                Object.keys(obj).forEach(function (key) {
                    //按年份进行遍历
                    let list = obj[key];
                    d.xAxis.push(key);
                    tmp[key] = {}
                    for (let i = 0; i < list.length; i++) {
                        Object.keys(list[i]).forEach(function (k) {
                            tmp[key][k] = list[i][k];
                            set.add(k);
                        })
                    }
                })
                //学科
                let i = 0;
                for (let item of set) {
                    d.category.push(item);
                    //console.log(item, tmp["2020"][item]);
                    if (tmp["2020"][item] > threshold) {
                        d.selected[item] = true;
                    } else {
                        d.selected[item] = false;
                    }
                }
                for (let item of d.category) {
                    d.details.push([]);
                    Object.keys(obj).forEach(function (key) {
                        d.details[d.details.length - 1].push(tmp[key][item]);
                    })
                }
                //  console.log("cate: ", d.category)
                // console.log("series: ", d.details)
                // console.log("targetObj: ", targetObj);
                targetObj.eChart.setOption({
                    xAxis: {data: d.xAxis},
                    series: this.series(targetObj),
                    legend: {data: d.category, selected: d.selected},
                    // tooltip: {
                    //     show: true,
                    //     trigger: "item"
                    //     // trigger:"line"
                    // },
                });
            },
            quickSort: quickSort,
            reqXXX: reqXXX,
            series: function (target) {
                let tmp = [];
                let d = target.data;
                console.log("dxxx.details: ", d.details.length);
                for (let i = 0; i < d.details.length; i++) {
                    tmp.push({
                        name: d.category[i],
                        type: 'line',
                        center: ["50%", "10%"],
                        stack: "",
                        data: d.details[i],
                        itemStyle: {},
                        emphasis: {
                            focus: "series"
                        }
                    });
                }
                //   console.log("tmp: ", tmp);
                return tmp;
            }
        },
        computed: {}
    });
</script>
</html>